import { Component, cls, type ElementProps, type StyledProps } from '@knno/jsx';
import SVGArrowDown from '../../svg/chevron-down.svg';
import { knnoButton } from '../../theme/button.css';
import { Icon } from '../icon/icon';
import { toolbarButtonStyle } from './button.css';

export function Button(props: ElementProps<HTMLButtonElement>) {
	return (
		<button {...props} type={props.type ?? 'button'} class={cls(props.class, knnoButton)}>
			{props.children}
		</button>
	);
}

export function ButtonPrimary(props: ElementProps<HTMLButtonElement>) {
	return (
		<button
			{...props}
			type={props.type ?? 'button'}
			class={cls(props.class, knnoButton, 'primary')}
		>
			{props.children}
		</button>
	);
}

export function ButtonSuccess(props: ElementProps<HTMLButtonElement>) {
	return (
		<button
			{...props}
			type={props.type ?? 'button'}
			class={cls(props.class, knnoButton, 'success')}
		>
			{props.children}
		</button>
	);
}

export function ButtonDanger(props: ElementProps<HTMLButtonElement>) {
	return (
		<button {...props} type={props.type ?? 'button'} class={cls(props.class, knnoButton, 'danger')}>
			{props.children}
		</button>
	);
}

export function ButtonWarning(props: ElementProps<HTMLButtonElement>) {
	return (
		<button
			{...props}
			type={props.type ?? 'button'}
			class={cls(props.class, knnoButton, 'warning')}
		>
			{props.children}
		</button>
	);
}

export type ToolbarButtonProps = StyledProps<ToolbarButton> & {
	/**
	 * SVG icon
	 */
	icon?: string;
	menu?: boolean;
	text?: string;
	title?: string;
	disabled?: boolean;
	checked?: boolean;
	checkable?: boolean;
	onClick?: (this: ToolbarButton) => void;
};
export class ToolbarButton extends Component<ToolbarButtonProps, ToolbarButton, HTMLDivElement> {
	protected render(): Node {
		return (
			<button
				type="button"
				title={this.props.title ?? ''}
				class={cls(
					this.props.class,
					toolbarButtonStyle,
					this.props.disabled ? 'disabled' : '',
					this.props.checked ? 'checked' : '',
				)}
				style={this.props.style}
				onClick={() => {
					if (this.props.checkable) {
						this.setChecked(!this.props.checked);
					}
					this.props.onClick?.call(this);
				}}
			>
				{this.props.icon ? <Icon class="icon" svg={this.props.icon} /> : ''}
				<lable>{this.props.text}</lable>
				{this.props.menu ? <Icon svg={SVGArrowDown} /> : ''}
			</button>
		);
	}

	private get label(): HTMLLabelElement {
		return this.el.querySelector(':scope>label')!;
	}

	get checked(): boolean {
		return !!this.props.checked;
	}

	setChecked(value: boolean): this {
		this.props.checked = value;
		this.el.classList.toggle('checked', value);
		return this;
	}

	get disabled(): boolean {
		return !!this.props.disabled;
	}

	setDisabled(value: boolean): this {
		this.props.disabled = value;
		this.el.classList.toggle('disabled', value);
		return this;
	}

	get text(): string {
		return this.props.text ?? '';
	}

	setText(value: string): this {
		this.props.text = value;
		this.label.textContent = value;
		return this;
	}

	get title(): string {
		return this.props.title ?? '';
	}

	setTitle(value: string): this {
		this.props.title = value;
		this.el.title = value;
		return this;
	}

	setIcon(svg: string | null): this {
		this.el.querySelector(':scope>svg.icon')?.remove();
		if (svg) {
			this.el.insertBefore(<Icon class="icon" svg={svg} />, this.label);
		}
		return this;
	}

	onClick(handler: ((this: ToolbarButton) => void) | undefined): this {
		this.props.onClick = handler;
		return this;
	}
}
